<template>
  <div class="brand_wall">
    <c-title :hide="false" :text="'品牌墙'"></c-title>
    <div class="searchBox">
      <van-search v-model="brand_name" @change="searchTap" placeholder="搜索品牌" background="#F5F5F5" shape="round"> </van-search>
    </div>
    <div class="bandConten">
      <!-- 分类导航 -->
      <div class="band_nav">
        <div class="nav_lis" :class="{ select: !subject_id && !is_follow }" @click="tapNav(null)">
          <div class="className">全部</div>
          <!-- <div class="count">({{ follow_brand_count }})</div> -->
        </div>
        <div class="nav_lis" :class="{ select: is_follow && !subject_id }" @click="tapNav('is_follow')">
          <div class="className">我的订阅</div>
          <div class="count">({{ follow_brand_count }})</div>
        </div>
        <div class="nav_lis" v-for="item in subList" :key="item.id" :class="{ select: subject_id == item.id }" @click="tapNav(item.id)">
          <div class="className">{{ item.name }}</div>
          <div class="count">({{ item.brand_count }})</div>
        </div>
      </div>
      <!-- 右边商品 -->
      <div class="band_r">
        <div class="sortBox">
          <div class="sort_default" :class="{ sortSelect: sort_type == 0 }" @click="tapSort(0)">默认排序</div>
          <div class="sales_volume" :class="{ sortSelect: sort_type == 1 }" @click="tapSort(1)">按销量</div>
        </div>
        <div class="goodBox" ref="Goodlis">
          <div class="good_lis" v-for="(item, index) in bandList" :key="index" @click="to_brand_home(item.id)">
            <div class="good_lis_l">
              <img :src="item.logo" alt="" />
            </div>

            <div class="good_lis_r">
              <div class="good_lis_r_t">
                <div class="title">{{ item.name }}</div>
                <i class="iconfont icon-icon_more11"></i>
              </div>
              <div class="desc" v-if="item.main_desc">{{ item.main_desc }}</div>
              <div class="goodTag">{{ item.goods_count }}款</div>
              <!-- <div class="tagBox" v-if="item.collect_list.length > 0">
                <div class="goodTag">{{ item.collect_list.length }}个会场</div>
                <div class="goodTag" @click.stop="tap_collect_listShow(index)">{{ item.collect_listShow ? "收起" : "展开" }}</div>
              </div>
              <template v-if="item.collect_list.length > 0 && item.collect_listShow">
                <div class="bandActive" v-for="items in item.collect_list" :key="items.id">
                  <div class="bandActive_title">{{ items.name }}</div>
                  <div class="bandActive_time" v-if="items.last_activity_start_time">{{ timestampToTime(items.last_activity_start_time) }}开始</div>
                  <div class="bandActive_time" v-if="items.last_activity_end_time">{{ timestampToTime(items.last_activity_end_time) }}结束</div>
                </div>
              </template> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 专题id
      subject_id: null,
      // 排序
      sort_type: 0,
      // 上架品牌，下架品牌
      disabled_type: 1,
      // 订阅
      is_follow: 0,
      checked: false,
      bandList: [],
      subList: [],
      follow_brand_count: 0,
      // 品牌id，下架上架用
      brand: {
        id: null,
        status: null
      },
      brand_name: "",
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.init();
    this.subjectList();
    this.getData();
    this.$refs.Goodlis.addEventListener("scroll", this.handleScroll);
  },
  beforeUnmount() {
    if (this.$refs.Goodlis) {
      this.$refs.Goodlis.removeEventListener("scroll", this.handleScroll);
    }
  },
  deactivated() {
    if (this.$refs.Goodlis) {
      this.$refs.Goodlis.removeEventListener("scroll", this.handleScroll);
    }
  },
  methods: {
    tap_collect_listShow(index) {
      this.$set(this.bandList[index], "collect_listShow", this.bandList[index].collect_listShow ? false : true);
    },
    handleScroll() {
      const scrollBox = this.$refs.Goodlis;
      const scrollableHeight = scrollBox.scrollHeight - scrollBox.clientHeight; //元素可滚动的高度
      const scrollTop = this.$refs.Goodlis.scrollTop; //当前滚动高度
      // console.log(scrollableHeight, "scrollableHeight元素可滚动的高度");
      // console.log(scrollTop, "scrollTop当前滚动高度");
      if (scrollableHeight - scrollTop <= 60) {
        if (this.isLoadMore) {
          this.getMoreData();
        } else {
          console.log("没有更多了");
        }
      }
    },
    async subjectList() {
      let { data, msg, result } = await $http.post("plugin.brand-market.frontend.brand.subjectList", {}, ".");
      if (result) {
        console.log(data);
        this.subList = data.list;
        this.follow_brand_count = data.follow_brand_count;
      } else {
        this.$toast(msg);
      }
    },
    searchTap() {
      this.init();
      this.getData();
    },
    tapNav(key) {
      if (key == "is_follow") {
        this.is_follow = 1;
        this.subject_id = null;
      } else {
        this.subject_id = key;
        this.is_follow = null;
      }
      this.disabled_type = 1;
      this.sort_type = 0;
      this.init();
      this.getData();
    },
    tapSort(key) {
      this.sort_type = key;
      this.init();
      this.getData();
    },
    tapDsiabled(key) {
      this.disabled_type = key;
      this.init();
      this.getData();
    },
    to_brand_home(key) {
      this.$router.push(this.fun.getUrl("brand_market_brand_home", { id: key }));
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.bandList = [];
      this.isLoadMore = true;
    },
    // timestampToTime: function(timestamp) {
    //   if (!Number(timestamp) || timestamp == "") {
    //     return "";
    //   }
    //   let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //   let Y = date.getFullYear() + "/";
    //   let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/";
    //   let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    //   let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    //   let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    //   return Y + M + D + h + m;
    // },
    async getData() {
      let json = {
        disabled_type: this.disabled_type,
        sort_type: this.sort_type,
        brand_name: this.brand_name
      };
      if (this.is_follow) {
        json.is_follow = this.is_follow;
      } else {
        if (this.subject_id) {
          json.subject_id = this.subject_id;
        }
      }
      let { data, msg, result } = await $http.post("plugin.brand-market.frontend.brand.brandList", json, "");
      if (result) {
        this.bandList = data.data;
        this.total_page = data.last_page;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          disabled_type: this.disabled_type,
          sort_type: this.sort_type,
          brand_name: this.brand_name
        };
        if (this.is_follow) {
          json.is_follow = this.is_follow;
        } else {
          if (this.subject_id) {
            json.subject_id = this.subject_id;
          }
        }
        let { data, msg, result } = await $http.post("plugin.brand-market.frontend.brand.brandList", json, "");
        if (result) {
          this.bandList = this.bandList.concat(data.data);
          this.isLoadMore = true;
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.brand_wall {
  overflow: hidden;
  height: 100vh;
}
.searchBox {
  .van-search__content {
    background: #fff;
  }
  .btn {
    background: #ffffff;
    border-radius: 1.13rem;
    padding: 0.63rem 1.06rem;
    font-size: 0.81rem;
    color: #00001c;
    box-sizing: border-box;
    line-height: 0.9rem;
  }
}
.bandConten {
  display: flex;
  justify-content: space-between;
  padding-right: 0.63rem;
  box-sizing: border-box;
  min-height: 100vh;
  // 右边商品
  .band_r {
    flex: 1;
    background: #fff;
    border-radius: 0.63rem;
    padding: 0.63rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .goodBox {
      height: 70vh;
      overflow-y: scroll;
      margin-top: 1rem;
      .good_lis {
        display: flex;
        margin-bottom: 1.28rem;
        .good_lis_l {
          flex-shrink: 0;
          margin-right: 0.5rem;
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 0.5rem;
          border: 0.03rem solid #e9e9e9;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
          }
        }
        .goods_lis_r_storeManager {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .goods_lis_r_storeManager_title {
            flex: 1;
            font-weight: bold;
            font-size: 0.88rem;
            text-align: left;
          }
          .btn {
            font-weight: 500;
            font-size: 0.81rem;
            line-height: 0.9rem;
            padding: 0.59rem 0.75rem;
            box-sizing: border-box;
            border-radius: 1rem;
            border: 0.03rem solid #d6d6dc;
          }
        }
        .good_lis_r {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          .bandActive {
            flex: 1;
            width: 100%;
            box-sizing: border-box;
            background: #f7f7f7;
            border-radius: 0.38rem;
            padding: 0.41rem 0.38rem;
            margin-top: 0.5rem;
            text-align: left;
            .bandActive_title {
              font-weight: 500;
              font-size: 0.75rem;
            }
            .bandActive_time {
              font-size: 0.75rem;
              color: #808080;
              margin-top: 0.34rem;
            }
          }
          .desc {
            font-size: 0.75rem;
            color: #808080;
            text-align: left;
          }
          .tagBox {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
          }
          .goodTag {
            font-size: 0.69rem;
            color: #f15353;
            line-height: 0.75rem;
            padding: 0.19rem;
            border-radius: 0.19rem;
            border: 0.03rem solid #f15353;
            margin-top: 0.35rem;
            display: inline-block;
          }
          .good_lis_r_t {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon-icon_more11 {
              flex-shrink: 0;
              font-size: 0.9rem;
              color: #aaaab3;
            }
            .title {
              flex: 1;
              text-align: left;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .dheigth {
      height: 75vh;
    }
    // 排序
    .sortBox {
      display: flex;
      align-items: center;
      margin: 1rem 0 0 0;
      .sort_default,
      .sales_volume {
        font-size: 0.75rem;
        color: #3b3b4a;
        margin-right: 1rem;
      }
      .sortSelect {
        font-weight: 500;
        font-size: 0.75rem;
        color: #f15353;
      }
    }
    // 顶部标签
    .up_and_down,
    .sale_tag {
      display: flex;
      .tag {
        width: 5.13rem;
        height: 2.31rem;
        border-radius: 0.5rem;
        border: 0.03rem solid #d6d6dc;
        font-size: 0.81rem;
        color: #808080;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.53rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .txt {
          line-height: 0.9rem;
        }
        .count {
          line-height: 0.9rem;
        }
      }
      .tagSelect {
        border: 0.03rem solid #f15353;
        color: #f15353;
        font-weight: 500;
      }
      .tag:last-child {
        margin-right: 0;
      }
    }
  }
  .band_nav {
    flex-shrink: 0;
    width: 5.13rem;
    padding-top: 0.81rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .nav_lis {
      width: 100%;
      font-size: 0.81rem;
      color: #3b3b4a;
      margin-bottom: 2.75rem;
      overflow: hidden;
      .className {
        position: relative;
        line-height: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 0.3rem;
        box-sizing: border-box;
      }
      .count {
        line-height: 0.95rem;
        margin-top: 0.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 0.3rem;
      }
    }
    .nav_lis:last-child {
      margin-bottom: 0;
    }
    .select {
      font-weight: bold;
      font-size: 0.88rem;
      color: #f15353;
      .className::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 0.19rem;
        height: 100%;
        background: #f15353;
        border-radius: 0.94rem;
      }
    }
  }
}
.downPopup {
  width: 15.63rem;
  height: 10rem;
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem 0.94rem 0.94rem 0.94rem;
  box-sizing: border-box;
  .downPopup_t {
    font-weight: bold;
    font-size: 1.06rem;
    color: #00001c;
  }
  .downPopup_d {
    font-size: 0.81rem;
    color: #808080;
    margin-top: 0.5rem;
  }
  .btn {
    display: flex;
    font-size: 0.88rem;
    margin-top: 1rem;
    .btn_l {
      width: 6.56rem;
      height: 2.25rem;
      background: #ffffff;
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
      border: 0.03rem solid #d6d6dc;
      text-align: center;
      line-height: 2.25rem;
    }
    .btn_r {
      width: 6.56rem;
      height: 2.25rem;
      background: #f15353;
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
      color: #ffffff;
      text-align: center;
      line-height: 2.25rem;
      margin-left: 0.63rem;
    }
  }
  .downPopup_tips {
    display: flex;
    justify-content: center;
    margin-top: 0.84rem;
  }
}
</style>
